<template>
  <div>
    <header>
      <van-nav-bar class="main_header notice_header">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
      </van-nav-bar>
    </header>
    <div class="gl_padding_20">
      <van-form ref="form" validate-first @submit="submitData">
        <van-field v-model="uploadForm.paperNumber" :required="true" :rules="[{ required: true, message: '请填写证书编号' }]" label="证书编号" />
        <van-field v-model="uploadForm.paperDesc" :required="true" :rules="[{ required: true, message: '请填写证书名称' }]" label="证书名称" />
        <div v-if="uploadForm.paperImage">
          <van-field name="validator" label="上传证书" class="upload">
            <template #input>
              <upload-file
                ref="paperImage"
                :action="baseUrl + '/api/upload/image'"
                accept=".jpg,.png,.jpeg"
                :file-url="baseUrl + uploadForm.paperImage"
                class-name="authentication_upload_img"
                @uploadSuccess="uploadImage"
              >
                <!-- <span slot="uploadName">点击上传证书</span> -->
              </upload-file>
            </template>
          </van-field>
        </div>
        <van-field v-else name="paperImage" label="上传证书" class="upload">
          <template #input>
            <upload-file
              ref="paperImage"
              :action="baseUrl + '/api/upload/image'"
              accept=".jpg,.png,.jpeg"
              class-name="authentication_upload_img"
              @uploadSuccess="uploadImage"
            >
              <!-- <span slot="uploadName">点击上传证书</span> -->
            </upload-file>
          </template>
        </van-field>
        <div class="gl_mt_15">
          <van-button style="width:100%; border-radius: 3px;" type="info" size="small" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import uploadFile from '../../components/UploadFile/index';
import {
  api_POST_EventsManagementRegisterTagRegisterTagDetail,
  api_PUT_EventsManagementRegisterTagRegisterTagDetail
} from '@/extend/api/gameswaggerApi/app.js';
import {
  SiSTKWEventsManagementUpdateRegisterTagDetailInput
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'SubmitForm',
  components: {
    uploadFile
  },
  props: {
    uploadForm: {
      type: Object,
      default() {
        return {
          paperImage: '',
          paperNumber: '',
          paperDesc: ''
        };
      }
    },
    tagId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseUrl: WEB_CONFIG.VUE_APP_STATIC_FILE_RUL,
      SiSTKWEventsManagementUpdateRegisterTagDetailInput: new SiSTKWEventsManagementUpdateRegisterTagDetailInput()
    };
  },
  methods: {
    goBack() {
      this.$refs['form'].resetValidation();
      this.$parent.back();
    },
    uploadImage(response) {
      this.$set(this.uploadForm, 'paperImage', response.tempUrl);
    },
    // 提交认证信息
    submitData(val) {
      var that = this;
      if (!that.uploadForm.paperImage) {
        this.$toast({ type: 'fail', message: '请上传证书' });
      } else {
        that.loading = true;
        if (that.uploadForm.id) {
          that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.registerTagDetailId = that.uploadForm.id;
          that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.registerTagId = that.tagId;
          that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperImage = that.uploadForm.paperImage;
          that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperNumber = that.uploadForm.paperNumber;
          that.SiSTKWEventsManagementUpdateRegisterTagDetailInput.paperDesc = that.uploadForm.paperDesc;
          api_PUT_EventsManagementRegisterTagRegisterTagDetail(that.SiSTKWEventsManagementUpdateRegisterTagDetailInput).then(res => {
            that.loading = false;
            that.$notify({ type: 'success', message: '编辑成功' });
            that.$parent.getRegisterList();
            that.goBack();
          }).catch(() => {
            that.$notify({ type: 'danger', message: '编辑失败' });
            that.loading = false;
          });
        } else {
          that.uploadForm.registerTagId = that.tagId;
          api_POST_EventsManagementRegisterTagRegisterTagDetail(that.uploadForm).then(res => {
            that.loading = false;
            that.$notify({ type: 'success', message: '认证成功' });
            that.$parent.getRegisterList();
            that.goBack();
          }).catch(() => {
            that.loading = false;
          });
        }
      }
    }
  }
};
</script>

<style>
.authentication_upload_img {
  width: 176px;
  height: 232px;
  text-align: center;
  color: #646566;
}
</style>
<style scoped>
.van-uploader {
  margin: 0;
}
.upload::before {
  position: absolute;
  color: #ee0a24;
  font-size: 14px;
  content: '*';
}
</style>
